<template>
  <div class="home">
    <!-- 头部 -->
    <div class="header">
      <div class="img-tab">
        <div class="logo-box">
          <img class="logo-img" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/loginName.png" />
          <!-- <div class="web-name">大爆炸思维</div> -->
        </div>
        <div class="tab">
          <a
            href="#"
            class="item-name"
            :class="{ active: active === index ? 'active' : '' }"
            v-for="(item, index) in tabList"
            :key="item.value"
            @click="linkTab(index)"
          >
            {{ item.label }}
          </a>
        </div>
      </div>
    </div>
    <div v-if="active === 0">
    <!-- banner图---扫码下载 -->
      <div class="banner">
        <img 
          class="item-img"
          src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/pc_master1.png"
        />
        <div class="login-code-box">
          <div class="login-img">
            <img 
              src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/logo.png" 
              class="item-img"/>
          </div>
          <div style="margin: 0 48px 0 16px;">
            <div class="login-img app-code">
              <div class="scan"></div>
              <img 
                src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/download_v1.png" 
                class="item-img"
              />
            </div>
            <div class="sao-code-name">扫码下载APP</div>
            <div class="sao-code-name">免费试听课程</div>
          </div>
          <div>
            <div class="login-img">
              <img 
                src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/public_code.jpg" 
                class="item-img"
              />
            </div>
            <div class="sao-code-name">公众号二维码</div>
             <div class="sao-code-name">领取课程讲义</div>
          </div>
        </div>
        <div class="pay-img" @click="addVideoDialog = true">
          <img src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/Playbutton.png"/>
        </div>
      </div>
      <!-- 主体内容 -->
      <main class="main">
        <div class="course-img-box">
          <div class="title-list">
            <div 
              class="course-title"
              :class="{ courseTitleBackg: courseTitleIndex === index ? 'courseTitleBackg' : '',
              stateBackgTitle: courseTitleIndex === 0 ? 'stateBackgTitle' : '',
              endBackgTitle: courseTitleIndex === 4 ? 'endBackgTitle' : ''
              }"
              v-for="(item,index) in courseTitle"  
              :key="item.id"  
              @mouseover.prevent="mouseOver(item.id,index)"
            >
              <div class="title">{{ item.title }}</div>
              <div class="subtitle">{{ item.subTitle }}</div>
            </div>
          </div>
          <!-- gif -->
          <div class="course-gif-title">
            <div class="gif-list" :class="{test:true,testenter:testShow}" ref="testref">
              <video
                autoplay
                muted
                controls
                loop="loop"
                id="video"
                ref="videoPlay"
                class="vjs-tech"
                playsinline="playsinline"
                webkit-playsinline="true"
                x5-playsinline="true"
                x5-video-player-type="h5"
                x5-video-player-fullscreen="false"
                tabindex="-1"
                preload="auto"
                :src="gifObj.gifUrl ? gifObj.gifUrl : courseGifList[0].gifUrl"
              >
              </video>
              <!-- <img class="gif-img" :src='gifObj.gifUrl ? gifObj.gifUrl : courseGifList[0].gifUrl'/> -->
            </div>
          </div>
          <div class="course-name">{{ gifObj.name ? gifObj.name : courseGifList[0].title }}</div>
        </div>
        <!-- 后面俩个gif -->
        <div class="six-imgnum-box" >
          <div class="img-list-box">
            <div class="item-img" :class="{testenter2:testShow2}" ref="testref2">
              <img class="gif5" :src="courseGifList[5].gifUrl" />
            </div>
            <div class="text-num">
              <div class="title">{{ courseGifList[5].name }}</div>
              <div class="text-a1">{{ courseGifList[5].title }}</div>
            </div>
          </div>
          <div class="img-list-box">
            <div class="item-img" :class="{testenter2:testShow2}" ref="testref2">
              <img class="gif5" :src="courseGifList[6].gifUrl" />
            </div>
            <div class="text-num">
              <div class="title" style="color: #7077FF;">{{ courseGifList[6].name }}</div>
              <div class="text-a1">{{ courseGifList[6].title }}</div>
            </div>
          </div>
        </div>
        <!-- 提升 -->
        <div class="promote">
          <div class="promote-img"><img src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/hinLevel.png" /></div>
        </div>
        <!-- 贴心服务 安心体验 -->
        <div class="serve-exper">
          <div class="title">
            <img style="width:24px;height:36px" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/adorn.png"/>
            贴心服务 严选师资
            <img style="width:24px;height:36px" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/adorn.png"/>
          </div>
          <div class="img-list">
            <div class="img-name" v-for="item in serveList" :key="item.id">
              <img :src="item.url" />
            </div>
          </div>
        </div>
        <!-- 提交家长 -->      
        <div class="Submit-parents">
          <div class="title-info">
            <div class="laba-img"><img src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/small.png" /></div>
            <div class="title">已提交家长</div>
          </div>
          <div class="patriarch-list">
            <div
              class="patriach-name"
              :class="{ aniamtedTop }"
              v-for="(item,index) in submitList"
              :key="item.id"
              v-if="index < 4"
            >
              <div>{{ item.phone }}</div>
              <div>{{ item.status }}</div>
            </div>
          </div>
        </div>
      </main>
      <!-- 底部 -->
      <div class="footer">
        <div class="item-concut">
          <span class="my-title" @click="aboutMy">关于我们</span>
          <span> Copyright @ 2021深圳市锦鳞技术有限公司 版权所有</span>
        </div>
        <div class="icpcode margin-top-bottom">
          <a 
            target="_blank"  
            href="https://beian.miit.gov.cn" 
            class="secuity-name-img text-color"
          >
            粤ICP备2021117518号
          </a>
           <a 
            target="_blank"
            :href="business"
            class="secuity-name-img"
          >
          增值电信业务经营许可证：粤B2-20211536
          </a>
        </div>
        <div class="icpcode">
          <a 
            target="_blank" 
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030902002963" 
            class="secuity-name-img text-color"
          >
          粤网公安备44030902002963号
          <div class="bian-logo"><img src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/bian.png"/></div>
          </a>
          <div>公司地址：深圳市宝安区财富港国际中心D座</div>
        </div>
      </div>
      <!-- 在线咨询 -->
      <div class="consult"  @click="addMouseover">
        <div 
        class="consule-img">
          <div class="consulting"><img src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/consulting.png" /></div>
          <div class="consul-name">立即报名</div>
        </div>
      </div>
    </div>
    <abou-tus v-if="active === 1"></abou-tus>
    <!-- 报名弹窗 -->
    <div class="apply-input-dialog">
      <el-dialog :visible.sync="dialogFormVisible" width="30%" :show-close="false" :close-on-click-modal="false">
      <div class="dialog-cancel" @click="dialogFormVisible = false">
        <i class="el-icon-circle-close" style="font-size: 40px; color: #fff"></i>
      </div>
      <div class="add-dialog">
        <div class="title">报名领取试听课</div>
        <el-input
          @mousewheel.native.prevent
          placeholder="请输入手机号"
          maxlength='11'
          v-model="fromapply.phoneNum"
          onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
          style="margin: 31px 0 24px 0"
        >
        </el-input>
        <div class="imput-btn">
          <el-input
            class="input"
            @mousewheel.native.prevent
            placeholder="请输入验证码"
            maxlength="6"
            v-model="fromapply.confirmCode"
          >
          </el-input>
          <div class="code-btn">
            <div class="symbol"></div>
            <div @click="clickCode" class="code-name" v-if="showbtn">{{code_ts}}</div>
            <div class="code-name" v-else style="color: #999999">{{ code_ts }}</div>
          </div>
        </div>
        <el-button type="danger" class="add-apply" @click="dialogAdd" round>立即报名</el-button>
        <div class="hint">保护您的隐私安全，电话号码只用来报名试听课</div>
      </div>
    </el-dialog>
    </div>
    <!-- 添加老师弹窗 -->
    <div class="add-teacher-dialog-box">
      <el-dialog :visible.sync="addTeacher" width="800px" :show-close="false" class="add-teacher-dialog" :close-on-click-modal="false">
        <div class="teacher-dialog" @click="addTeacher= false">
          <i class="el-icon-circle-close" style="font-size: 40px; color: #fff"></i>
        </div>
        <div class="teacher-main" style="padding-bottom:104px">
          <div class="title" style="font-size:48px;color: #333333;padding: 80px 0 88px 0;">还差一步，完成课前准备</div>
          <div class="code-list">
            <div class="download-code" style="font-size: 32px;margin-right:120px">
              <div class="item-code-img" style="width:240px;height:240px;margin-bottom:46px">
                <img class="code-img" style="width:220px;height:220px;" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/download_v1.png"/>
              </div>
              <div>下载APP</div>
              <div>免费试听课程</div>
            </div>
            <div class="download-code" style="font-size: 32px;">
              <div class="item-code-img" style="width:240px;height:240px;margin-bottom:46px">
                <img class="code-img" style="width:220px;height:220px;" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/%E5%AE%98%E7%BD%91%E5%92%A8%E8%AF%A2.jpg"/>
              </div>
              <div>添加辅导老师</div>
              <div>享受专属服务</div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 弹出视频弹出 -->
    <el-dialog :visible.sync="addVideoDialog" width="40%" @closed="videoClosed" class="add-videodialog" :show-close="false" :close-on-click-modal="false">
      <div class="teacher-dialog" @click="addVideoDialog= false">
      <i class="el-icon-circle-close" style="font-size: 40px; color: #fff"></i>
      </div>
      <video
        autoplay
        muted
        controls
        loop="loop"
        id="video"
        ref="videoPlay"
        class="video-height"
        playsinline="playsinline"
        webkit-playsinline="true"
        x5-playsinline="true"
        x5-video-player-type="h5"
        x5-video-player-fullscreen="false"
        tabindex="-1"
        preload="auto"
        src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%E8%A7%86%E9%A2%91_v2.mp4"
      >
      </video>
    </el-dialog>
  </div>
</template>

<script>
import { $GET, $POST } from '../../utils/api.js'
import homeComponent from './homecompoinen.vue'
import abouTus from './Aboutus.vue'
export default {
  components: { homeComponent, abouTus },
  name: 'Home',
  data() {
    return {
      addVideoDialog: false, // 打开视频弹出
      addTeacher: false, // 添加老师弹窗
      gifObj: {
        gifUrl: '',
        name: ''
      },
      courseTitleIndex: 0, // 默认课程标题下标
      courseGifList: [ // gif动图
        { 
          id: 1, 
          gifUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/%E7%BC%96%E7%A8%8B%E8%A7%86%E9%A2%911_x264.mp4',
          title: '课程开始就树立编程目标，大爆炸思维投入千万资金，研发第一款3D+物理引擎的图形 化编程工具，编程控制宇航员在太空漫步，做宇宙实验'
        },
        { 
          id: 2, 
          gifUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/%E5%89%A7%E6%83%85%E5%8A%A8%E7%94%BB%E8%A7%86%E9%A2%91.mp4',
          title: '讲述了一只现代穿梭过去的 机器熊猫与原始人一家相处 的日子里，发生了许多啼笑 皆非的故事，教会了他们在 生活和学习中都需要“讲逻 辑”“找方法”“用脑子”'
        },
        { 
          id: 3, 
          gifUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/%E5%93%88%E5%AF%86%E7%93%9C%E7%9A%84%E9%87%8D%E9%87%8F_x264.mp4',
          title: '通过真人趣味讲解，结合生活中的实例进行逻辑思维训 练，更接地气，让孩子在生活中利用编程思想来分析问题拆解步骤 达至目标等思维建模能力'  
        },
        { 
          id: 4, 
          gifUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/%E4%B8%93%E6%B3%A8%E5%8A%9B%E8%AE%AD%E7%BB%83_x264.mp4',
          title: '采用国际飞行员航天员训练 的舒尔特训练法，提升注意力的稳定性、转移速度和广度'
        },
        { 
          id: 5, 
          gifUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE_x264.mp4',
          title: '使用思维工具分析需求，逐渐培养孩子的逻辑、抽象和归纳能力'  
        },
        { 
          id: 6,
          name: '人工智能的应用',
          gifUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/gif_course6.gif',
          title: '将AR、语音识别等人工智能 技术应用到课程中，如语音操控汽车，扫描进行植物识别'
        },
        { 
          id: 7, 
          name: '有趣的科学',
          gifUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/gif_course7.gif',
          title: '将现代科技文明（火星车、 火箭、空间站...），通过搭建模型和动画学习的形式相 结合，让孩子在搭建过程中习得这些尖端科技的结构及 相关数学、物理、化学、工程的知识'
        },
      ],
      courseTitle: [ // 课程标题数据
        { id: 1, title: '3D图形化编程', subTitle: '编程为载体训练逻辑思维' },
        { id: 2, title: '动画的天花板', subTitle: '寓知识于动画沉浸式课堂体验' },
        { id: 3, title: '生活中的编程', subTitle: ' 真人结合生活中的实例进行思维训练' },
        { id: 4, title: '专注力训练',  subTitle: '采用航天员训练的舒尔特方法' },
        { id: 5, title: '思维导图', subTitle: '教孩子使用思维工具分析解决问题' }
      ],
      headerCarousel: [ // 头部轮播图数据
        'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/banner2.png',
        'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/banner1.png'
      ],
      business:require('../assets/business.jpg'),
      code_ts: '获取验证码',
      secTime: 60, // 倒计时秒数
      showbtn: true, // 展示获取验证码或倒计时按钮判断
      codeUrl: '', // 二维码图片
      regPhone: /^[1][3,4,5,6,7,8][0-9]{9}$/, // 手机正则
      videoUrl: '',
      palytimeStatue: false,
      palyStatus: false, // 播放按钮状态
      bottomtPhone: '', // 底部输入框绑定值
      aniamtedTop: false,
      active: 0,
      dialogFormVisible: false,
      submitList: [],
      fromapply: { // 立即报名参数
        phoneNum: '', // 手机号
        confirmCode: '', //验证码
        messageToken: '' // 短信token
      },
      serveList: [
        { id: 1, url: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/experience1.png' },
        { id: 2, url: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/experience2.png'},
        { id: 3, url: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/experience3.png' }
      ],
      tabList: [
        { label: '首页', value: 1 },
        { label: '关于我们', value: 2 }
      ],
      currentScroll: '', // 当前滚动的位置
      testShow: false, // 动画显示
      testShow2: false,
    }
  },
  created(){
    this.moveWeb()
  },
  mounted() {
    this.getPhone()
    this.getCode()
    setInterval(this.slideshow, 500)
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    // 判断如果是手机端打开的首页就跳手机端
    moveWeb() {
      if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        let path = window.location.href.split('?')[1]
        this.$router.push(`/m?${path ? path : ''}`)
      }else{
        
      }
    },
    // 关闭弹窗回调
    videoClosed() {
      this.$refs.videoPlay.pause()
    },
    // 点击关于我们
    aboutMy() {
      this.active = 1
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果 
      const timeTop = setInterval(() => {
      document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10)
    },
    // 滚动事件
    handleScroll() {
      this.currentScroll = window.pageYOffset //表示当前滚动的位置
 
      if (this.currentScroll >= this.$refs.testref.offsetTop - 1000) { //当前滚动位置到达testref的时候，显示div（100作为用）
        this.testShow = true;
      }
      if(this.$refs.testref2.offsetTop - this.currentScroll <= 800 ) {
        this.testShow2 = true;
      }
    },
    // 课程标题移入事件
    mouseOver(id,index) {
      this.courseTitleIndex = index
      this.courseGifList.forEach(item => {
        if(item.id === id) {
          this.gifObj.gifUrl = item.gifUrl
          this.gifObj.name = item.title
        }
      })
    },
    // 获取二维码
    async getCode() {
      const res = await $GET('/courseware/PhoneSubmit/GetTecherWeChat')
      if(res.code === 0) {
        this.codeUrl = 'data:image/png;base64,'+ res.result
      } 
    },
    // 获取手机号码列表
    async getPhone() {
      const res = await $GET('/courseware/PhoneSubmit')
      if(res.code === 0) {
        this.submitList = res.result.map(item => ({ phone: item.phoneNum, status: '已提交', id: item.guid}))
      }
    },
    // 验证
    verification() {
      if (!this.fromapply.phoneNum) {
        this.$message({ message: '请输入手机号码', type: 'warning', offset: 90 });
        return false
      }
      if(this.fromapply.phoneNum && !this.regPhone.test(this.fromapply.phoneNum)) {
        this.$message({ message: '手机号码格式不正确', type: 'warning', offset: 90 });
        return false
      }
      if (!this.fromapply.confirmCode) {
        this.$message({ message: '请输入验证码', type: 'warning', offset: 90 });
        return false
      }
      return true
    },
    // 对话框报名-立即报名
    async dialogAdd() {
      if (!this.verification()) return
      const res = await $POST('/courseware/PhoneSubmit',this.fromapply)
      if(res.code ===0) {
        this.getPhone()
        this.$message({ message: '提交成功', type: 'success', offset: 90 });
        this.fromapply.confirmCode = '' // 对话框验证码
        this.fromapply.phoneNum = '' // 对话框手机号
        this.fromapply.messageToken = '' // 清空短信token
        this.dialogFormVisible = false
        this.addTeacher = true
      }else{
        this.$message({ message: res, type: 'error', offset: 90 });
      }
    },
    // 播放
    playClick() {
      this.palytimeStatue = true
      this.$nextTick(function () {
        this.$refs.videoPlay.play()
      })
    },
    // 播放按钮鼠标移入
    palyMouse() {
      this.palyStatus = true
    },
    // 播放按钮鼠标移出
    palyMouseleave() {
      this.palyStatus = false
    },
    // 获取验证码
    async clickCode() {
      if(!this.fromapply.phoneNum){
        this.$message({ message: '请输入手机号码', type: 'warning', offset: 90 });
        return false
      }
      if(this.fromapply.phoneNum && !this.regPhone.test(this.fromapply.phoneNum)) {
        this.$message({ message: '手机号码格式不正确', type: 'warning', offset: 90 });
        return false
      }
      this.getyzcode()
      const res = await $POST('/sms/aliyun/send-confirm-code',{
        phoneNumber: this.fromapply.phoneNum ,
        templateCode: 'SMS_226810366'
      },{
        "baseURL" :"https://openapi.jinlinjishu.com/api"
      })
      if(res.code === 0) {
        this.fromapply.messageToken = res.result
      }
    },
    // 60秒倒计时
		getyzcode () {
			let timer = setInterval(() => {
        this.secTime = this.secTime - 1
        this.code_ts = this.secTime + 'S后重试'
        this.showbtn = false
        if (this.secTime === 0) {
            clearInterval(timer)
            this.secTime = 60
            this.code_ts = "获取验证码"
            this.showbtn = true
        }
      }, 1000)
		},
    // 顶部选项卡点击事件
    linkTab(index) {
      this.active = index
    },
    // 电话竖向跑马灯
    slideshow() {
      const vm = this
      vm.aniamtedTop = true
      setTimeout(() => {
        vm.submitList.push(vm.submitList[0])
        vm.submitList.shift()
        this.aniamtedTop = false
      }, 100)
    },
    // 移入事件
    addMouseover() {
      this.dialogFormVisible = true
    },
    concelMouseleave(){}
  }
}
</script>

<style lang="scss" scoped>
.home {
  letter-spacing: 0.133vw;
  img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  // 去掉input上下键
  ::v-deep input::-webkit-outer-spin-button,
  ::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  .header {
    width: 100%;
    height: 80px;
    background: #fff;
    position: fixed;
    left: 0;
    top: 0;
    padding: 0 432px 0 360px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 99;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.06);
    .img-tab {
      display: flex;
      align-items: center;
      .logo-box {
        width: 194px;
        height: 44px;
        margin-right: 134px;
        display: flex;
        align-items: center;
        .logo-img{
          width: 100%;
          height: 100%;
          object-fit: fill;
          // object-fit: cover;
          margin-right: 10px;
        }
      }
      .tab {
        display: flex;
        align-items: center;
        font-size: 16px;

        .item-name {
          // min-width: 150px;
          color: #000000;
          padding: 10px 0;
          // width: 80px;
          // height: 80px;
          // line-height: 80px;
          margin-right: 96px;
          text-decoration: none;
          text-align: center;
        }
        .item-name:hover{
          color:  #ff800c;
        }
        .active {
          // background: #ff800c;
          color:  #ff800c;
          border-bottom: 3px solid  #ff800c;
          font-size: 18px;
          font-weight: 600;
        }
      }
    }
    .register-now{
       width: 112px;
        background: #ff800c;
        padding: 6px 0 !important;
        border-radius: 16px !important;
        font-size: 14px;
        letter-spacing: 0.2em;
        border-color: #ff800c;
    }
  }
  .banner {
    margin-top: 80px;
    width: 100%;
    height: 640px;
    background: #d7d7d7;
    position: relative;
    .item-img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    // 二维码样式
    .login-code-box{
      position: absolute;
      width: 387px;
      height: auto;
      left: 760px;
      bottom: 112px;
      background: rgba(255, 255, 255, 0.2);
      border: 2px solid #FFFFFF;
      box-sizing: border-box;
      border-radius: 20px;
      padding: 18px 18px 5px 15px;
      display: flex;
      .login-img{
        width: 96px;
        height: 96px;
      }
      .app-code{
        position: relative;
      }
      .scan{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        background: #fff;
        box-shadow: 0px 0px 3px 3px #F3CF7B;
        animation: scan 2s infinite linear;     
      }
      @keyframes scan {
        0%{transform: translateY(0px);}
        100%{transform: translateY(96px);}
      }
      .sao-code-name{
        font-weight: 500;
        font-size: 16px;
        color: #000000;
        letter-spacing:0px;
      }
    }
       @keyframes pay-img {
         0% {
        transform: translateX(150%);
        opacity: 0;
      }

      50% {
        transform: translateX(-8%);
        opacity: 0.2;
      }

      65% {
        transform: translateX(4%);
        opacity: 0.4;
      }

      80% {
        transform: translateX(-4%);
        opacity: 0.6;
      }

      95% {
        transform: translateX(2%);
        opacity: 0.8;
      }

      100% {
        transform: translateX(0%);
        opacity: 1;
      }
      }
    .pay-img{
      width: 128px;
      height: 128px;
      position: absolute;
      left: 1110px;
      bottom: 53px;
      transform: rotate(15.47deg);
      animation: pay-img 1s;
    }
    .pay-img:hover{
      -moz-transform: scale(1.05);
      -webkit-transform: scale(1.05);
      -o-transform: scale(1.05);
    }
  }
  .main {
    background: #fff;
    // padding: 0 360px;
    .course-img-box{
      width: 1200px;
      height: 868px;
      background: #FAFAFB;
      border-radius: 30px;
      margin: auto;
      margin-top: 48px;
      .title-list{
        display: flex;
        width: 100%;
        height: 140px;
        background: #FF4D35;
        border-radius: 20px;
       .courseTitleBackg{
        background: linear-gradient(105.06deg, #FEC56B 0%, #FF800C 100%);
         animation:courseTitleBackg 0.3s forwards;
         .title{
            color: #fff !important;
         }
       }
        @-webkit-keyframes courseTitleBackg 
        {
            0%   {height: 0px}
            5%   {height: 6.25px}
            10%   {height: 19.5px}
            15%   {height: 26px}
            20%   {height: 32.5px}
            25%  {height: 39px;}
            30%   {height: 45.5px}
            35%   {height: 52px}
            40%   {height: 58.5px}
            45%   {height: 65px}
            50%  {height:71.5px;}
            55%   {height: 78px}
            60%   {height: 84.5px}
            65%   {height: 91px}
            70%   {height: 97.5px}
            75%  {height: 104px;}
            80%   {height: 110.5px}
            85%   {height: 117px}
            90%   {height: 123.5px}
            95%   {height: 130px}
            100% {height:140px;}
        }
       .stateBackgTitle{
         border-radius: 20px 0 0 20px;
       }
       .endBackgTitle{
         border-radius: 0 20px 20px 0;
       }
      .course-title{
        width: 240px;
        height: 140px;
        text-align: center;
        .title{
          font-weight: bold;
          font-size: 28px;
          color: #250200;
          margin: 24px 0 4px 0;
        }
        .subtitle{
          // text-align: right;
          width: 240px;
          padding: 0 30px;
          font-size: 18px;
          color: #FFF1E3;
        }
      }
    }
    // gif动图
    .course-gif-title{
      width: 1120px;
      height: 620px;
      margin: 14px auto;
      background: #FE5749;
      border: 10px solid #FE5749;
      box-sizing: border-box;
      border-radius: 20px;
      .testenter{
         animation: testenter 1s;
      }
       @keyframes testenter {
         0% {
        transform: translateX(150%);
        opacity: 0;
      }

      50% {
        transform: translateX(-8%);
        opacity: 0.2;
      }

      65% {
        transform: translateX(4%);
        opacity: 0.4;
      }

      80% {
        transform: translateX(-4%);
        opacity: 0.6;
      }

      95% {
        transform: translateX(2%);
        opacity: 0.8;
      }

      100% {
        transform: translateX(0%);
        opacity: 1;
      }
      }
      .gif-list{
        width: 1100px;
        height: 600px;
        border-radius: 30px;
        margin: auto;
        .vjs-tech{
          // display: block;
          width: 100%;
          height: 100%;
          border-radius: 30px;
          object-fit: cover;
          // vertical-align: bottom;
          // vertical-align: text-bottom;
        }
      }
    }
    .course-name{
      width: 1100px;
      padding-left: 72px;
      font-size: 20px;
    }
  }
  .testenter2{
    animation: testenter2 1.5s linear .5s both;
  }
   @keyframes testenter2 {
     0%{ 
        -webkit-transform: matrix(.5,0,0,.5,0,0);
        transform: matrix(.5,0,0,.5,0,0);
        opacity: 0;
      }
     3.1% {
        -webkit-transform: matrix(.743,0,0,.743,0,0);
        transform: matrix(.743,0,0,.743,0,0);
        opacity: .4;
      }
      6.21% {
        -webkit-transform: matrix(.939,0,0,.939,0,0);
        transform: matrix(.939,0,0,.939,0,0);
        opacity: .8;
      }
      9.31% {
        -webkit-transform: matrix(1.042,0,0,1.042,0,0);
        transform: matrix(1.042,0,0,1.042,0,0);
        opacity: 1;
      }
      12.41% {
        -webkit-transform: matrix(1.05,0,0,1.068,0,0);
        transform: matrix(1.05,0,0,1.05,0,0);
        opacity: 1;
      }
      20.12% {
        -webkit-transform: matrix(1.015,0,0,1.015,0,0);
        transform: matrix(1.015,0,0,1.015,0,0);
        opacity: 1;
      }
      27.73% {
        -webkit-transform: matrix(.993,0,0,.993,0,0);
        transform: matrix(.993,0,0,.993,0,0);
        opacity: 1;
      }
      43.14% {
        -webkit-transform: matrix(1.001,0,0,1.001,0,0);
        transform: matrix(1.001,0,0,1.001,0,0);
        opacity: 1;
      }
      58.56% {
        -webkit-transform: matrix(1,0,0,1,0,0);
        transform: matrix(1,0,0,1,0,0);
        opacity: 1;
      }
      73.97% {
      -webkit-transform: matrix(1,0,0,1,0,0);
      transform: matrix(1,0,0,1,0,0);
      opacity: 1;
    }
    89.39% {
      -webkit-transform: matrix(1,0,0,1,0,0);
      transform: matrix(1,0,0,1,0,0);
      opacity: 1;
    }
     100%{
      -webkit-transform: matrix(1,0,0,1,0,0);
      transform: matrix(1,0,0,1,0,0);
      opacity: 1;
     }
   }
    .six-imgnum-box{
      padding: 0 360px;
      margin-top: 24px;
      display: flex;
      justify-content: space-between;
      .img-list-box {
      .item-img {
        width: 560px;
        height: 336px;
        border-radius: 30px;
        opacity: 0;
        .gif5{
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 30px;
          position: relative;
          z-index: 2;
        }
      }
      .text-num {
        width: 560px;
        text-align: center;
        font-size: 24px;
        color: #666666;
        margin-top: 24px;
        .title {
          font-size: 32px;
          font-weight: bold;
          color: #FF800C;
          margin-bottom: 21px;
        }
        .text-a1 {
          width: 405px;
          font-size: 20px;
          margin: auto;
          text-align: left;
        }
      }
    }
  }
    .promote {
      margin-top: 32px;
      background: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/hintBackg.png');
      padding: 0 360px;
      padding-top: 100px;
      padding-bottom: 156px;
      background-repeat: no-repeat;
      text-align: center;
      position: relative;
      background-size: 100% 100%;
      .titel {
        font-size: 18px;
        font-weight: bold;
      }
      .title-p1 {
        font-size: 50px;
        color: #666666;
        // font-weight: bold;
        margin: 20px 0;
      }
      .rocket{
        width: 469px;
        height: 304px;
        position: absolute;
        top: 401px;
        left: 259px;
      }
      .promote-img {
        width: 100%;
        height: auto;
      }
    }
    .serve-exper {
      margin-top: 100px;
      width: 100%;
      padding: 0 360px;
      text-align: center;
      .title {
        font-size: 45px;
        font-weight: bold;
        padding-bottom: 36px;
      }
      .img-list {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        .img-name:nth-of-type(2) {
          margin: 0 70px;
        }
        .img-name:hover{
          box-shadow: 0px 1px 30px rgba(255, 128, 12, 0.12);
          transform: translateY(-10px);
          transition: transform .3s ease 0s;
        }
        .img-name {
          display: flex;
          align-items: center;
          .item-naem {
            width: 240px;
            height: 360px;
          }
        }
      }
    }
    .Submit-parents {
      width: 100%;
      border-bottom: 1px solid #dcdcdc;
      padding: 83px 50px 60px 5px;
      text-align: center;
      .title-info {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 64px;
        .laba-img {
          width: 56px;
          height: 56px;
        }
        .title {
          font-size: 30px;
          font-weight: bold;
          color: #ff7721;
          margin-left: 48px;
        }
      }
      .patriarch-list {
        padding-top: 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        background: #FFFCFA;
        font-size: 24px;
        .patriach-name {
          width: 40% !important;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #333;
          margin-bottom: 28px;
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:#343333;
    .item-concut {
      font-size: 12px;
      color: #ffffff;
      .my-title{
        margin-right: 16px;
        cursor:default;
      }
    }
    .icpcode{
      color: #999999;
      font-size: 12px;
      display: flex;
      align-items: center;
      .text-color{
        color: #fff !important;
      }
      .secuity-name-img{
        margin-right: 16px;
        text-decoration:none;
        color: #999999;
        display: flex;
        align-items: center;
        .bian-logo {
          width: 20px;
          height: 20px;
      }
    }
    }
    .margin-top-bottom{
      margin: 4px 0;
    }
  }
  // 在线咨询样式
  .consult {
    position: fixed;
    right: -4px;
    top: 67%;
    z-index: 99;
    cursor:default;
    .consule-img:hover{
      -moz-transform: scale(0.95);
      -webkit-transform: scale(0.95);
      -o-transform: scale(0.95);
    }
    .consule-img {
      width: 152px;
      height: 60px;
      background: #FF800C;
      box-shadow: 0px 0px 16px rgba(172, 83, 0, 0.37);
      border-radius: 30px 0px 0px 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      .consulting{
        width: 33px;
        height: 25px;
      }
      .consul-name{
        height: 25px;
        font-size: 18px;
        color: #ffffff;
        margin-left: 10px;
        line-height: 25px;
      }
    }
  }
  // 对话框样式
  ::v-deep .el-dialog {
    border-radius: 10px !important;
  }
  ::v-deep .el-dialog__header {
    display: none !important;
  }
  .apply-input-dialog{
    .dialog-cancel {
      position: absolute;
      top: -30px;
      right: -45px;
    }
    .add-dialog {
      background: #fff;
      padding: 0 20px;
      text-align: center;
      .title {
        font-size: 24px;
        font-weight: normal;
        color: #262626;
        letter-spacing: 0.2em;
      }
      ::v-deep .el-input__inner {
        height: 64px !important;
        color: #333333;
        width: 400px;
        border-radius: 40px;
        line-height: 64px !important;
        padding-left: 40px;
        font-size: 18px;
      }
      ::v-deep.el-input__inner {
        &::placeholder {
          color: #999999;
          font-size: 18px;
          letter-spacing: 0.1em;
        }
      }
      .imput-btn {
        width: 400px;
        margin: auto;
        position: relative;
        .code-btn {
          height: 64px;
          position: absolute;
          top: 0px;
          right: 0px;
          display: flex;
          align-items: center;
          .symbol {
            width: 1px;
            height: 24px;
            background: #eeeeee;
          }
          .code-name {
            cursor: pointer;
            font-size: 18px;
            color: #ff800c;
            margin: 0 31px 0 24px;
            letter-spacing: 0.1em;
          }
        }
      }
      .add-apply {
        width: 400px;
        background: #ff800c;
        padding: 19px 0 !important;
        margin: 56px 0 15px 0;
        border-radius: 40px !important;
        font-size: 24px;
        letter-spacing: 0.2em;
      }
      .hint {
        color: #aaaaaa;
        font-size: 14px;
      }
    }
  }
  .add-teacher-dialog-box{
        // 添加老师弹窗
    .teacher-dialog{
      position: absolute;
      top: -30px;
      right: -45px;
    }
      .add-teacher-dialog ::v-deep .el-dialog__body{
    padding: 0 !important;
    height: 450.5px !important;
  }
  ::v-deep .el-dialog{
    border-radius: 125px !important;
  }
  .teacher-main{
    background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/codeBackg.png');
    background-repeat: no-repeat;
    text-align: center;
    .code-list{
      display: flex;
      align-items: center;
      justify-content: center;
      .download-code{
        text-align: center;
        color: #000;
        .item-code-img{
          border: 1px solid #000;
          border-radius: 12px;
          // margin-bottom: 18.4px;
          display: flex;
          align-items: center;
          justify-content: center;
          .code-img{
            object-fit: cover;
          }
        }
      }
    }
  }
}
// 视频弹窗
   .add-videodialog ::v-deep .el-dialog__body{
    padding: 0 !important;
    // height: 422px !important;
    .addVideo-main{
    // background: red;
    border-radius: 100px;
    }
    .video-height{
      width: 100%;
      height: 100%;
      border-radius: 10px;
      display: block;
    }
    
    .teacher-dialog{
      position: absolute;
      top: -30px;
      right: -45px;
    }
  }
}
</style>
